<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="添加自定义标签"
        right-text="取消"
        :border="false"
        @click-right="$router.go(-1)"
      />
      <van-search v-model="customize" shape="round" placeholder="输入你的个性化标记" />
      <ul class="customize-tag-list">
        <li v-for="(item, index) of tags" :key="index">
          <i></i>
          <div class="tag-item-content" @click="goPreview(item)">
            <span>{{ item.txt }}</span>
            <i>生成自定义标签</i>
          </div>
          <span class="create-tag"><i style="position: relative; top: -1px;">+</i>创建</span>
        </li>
      </ul>
    </header>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Search } from 'vant'
import Bus from '@/utils/bus.js'

Vue.use(NavBar)
Vue.use(Search)

export default {
  data () {
    return {
      customize: '',
      tags: [{ txt: '小懒猪' }, { txt: '大懒猪' }]
    }
  },
  methods: {
    goPreview (item) {
      Bus.$emit('custTag', item.txt)
      this.$router.go(-1)
    }
  },
  beforeRouteLeave (to, from, next) {
    if (to.name === 'preview') {
      to.meta.keepAlive = true
    }
    next()
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/community/addCustomizeTag.scss';
</style>
